

/* 这个文件是用于博客编辑页的 css样式的 */

.blog-edit-container {
    width: 800px;
    height: calc(100% - 50px);

    /* 居中 */
    margin: 0 auto;
}

.blog-edit-container .title {
    height: 50px;

    /* 设置弹性布局：是为了该标签下的内容水平方向能够居中或者其他操作 */
    /* 需要一个相对参考的标签，也就是  <input type="text" id="title">
            <button id="sava">保存</button>  相对于 外部<div class="title">的位置的布局
            强调的就是 弹性布局需要有一个 参考标签*/
            
            /* 此处不用弹性布局也可以,用到 #title 中的外边距margin-top  */
    /* display: flex;
    display: flex;

    /* 垂直方向上的 */
    /* align-items: center; */

    /* 水平方向上的布局 */
    /* justify-content: space-between;  */

    margin-bottom: 10px;
}

#title {
    width: 590px;
    height: 40px;

    /* 去掉边框 */
    border: none;

    /* 去掉输入时 边框会加上黑色，也就是轮廓线 */
    outline:none;

    /* 圆角 */
    border-radius: 5px;

    /* 框内文字离左侧距离,对于文本输入框来说，padding就是框内 */
    padding-left: 7px;

    /* 外边距 */
    margin-top: 10px;
    /* margin-left: 8px; */
    margin-right: 20px;

    /* 透明色 */
    background-color: rgba(255,255,255,0.55);

    font-size: 18px;

}

/* 获取到焦点: 鼠标点在 输入框的时候,变成不透明 */
#title:focus {
    background-color: #fff;
}

#save {
    width: 70px;
    height: 40px;

    border-radius: 5px;

    background-color:orange;

    color: white;

    border: none;

}

/* 伪类选择器 ： 选中某一种状态*/
#save:active {
    background-color: #666;
    /* color: black; */
}

#sava span {
    font-size: 14px;
}

#submit {
    width: 90px;
    height: 40px;

    border-radius: 5px;

    background-color:orange;

    color: white;

    border: none;

    margin-left: 20px;
    /* margin-right: 8px; */
}

/* 伪类选择器 ： 选中某一种状态*/
#submit:active {
    background-color: #666;
    /* color: black; */
}

/* 设置编辑器样式 */
#editor {
    border-radius: 6px;

    /* 注意此时这个外面看上去没有生效  是因为markdown内部是不透明的,要用到 opacity */
    /* background-color: rgba(255,255,255,0.55); */

    opacity: 70%;

    /* padding: 10px; */
}
